import React, { useState } from 'react';
import { Button, Form, Input } from 'antd';
import axios from 'axios';

const IndexPage = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const onFinish = async (values) => {
    setLoading(true);
    try {
      const { data } = await axios.post('http://localhost:3500/alipay', values);
      const newWindow = window.open('', '_blank');
      newWindow.document.write(data); // 将返回的 HTML 内容写入新窗口
      newWindow.document.close(); // 关闭文档写入流
    } catch (error) {
      alert('支付请求失败');
    } finally {
      setLoading(false);
    }
  };
  return (
    <Form form={form} name="alipayForm" onFinish={onFinish} initialValues={{ remember: true }} style={{ maxWidth: 600, margin: 'auto' }}>
      <Form.Item name="totalAmount" label="订单金额" rules={[{ required: true, message: '请输入订单金额' }]}>
        <Input placeholder="请输入订单金额" />
      </Form.Item>
      <Form.Item name="subject" label="商品名称" rules={[{ required: true, message: '请输入商品名称' }]}>
        <Input placeholder="请输入商品名称" />
      </Form.Item>
      <Form.Item name="body" label="商品描述" rules={[{ required: true, message: '请输入商品描述' }]} >
        <Input.TextArea placeholder="请输入商品描述" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading}>
          提交支付
        </Button>
      </Form.Item>
    </Form>
  );
};
export default IndexPage;